<template>
  <view v-if="listData.length > 0">
    <view class="grid-body mt-30" v-for="(item, index) in listData" :key="index">
      <view class="check grid-common">
        <view class="title flex">
          <text>{{ index + 1 > 9 ? index + 1 : '0' + Number(index + 1) }}</text>
        </view>
        <view class="flex text"
          >隐患项：
          <text>{{ item.workContent }}</text>
        </view>
        <view class="flex text"
          >上报时间：
          <text>{{ item.businessTime }}</text>
        </view>
        <view class="flex text"
          >状态：
          <text>{{ item.workStatus }}</text>
        </view>
        <view v-if="editable" class="flex text bor-top items-center justify-between">
          <view class="flex" style="margin-left: auto">
            <button class="info-btn" @click="handleDelete(index)">删除</button>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view v-else>
    <empty></empty>
  </view>
</template>

<script>
import Empty from '@/components/cu-empty/index.vue'
import { nextTick } from 'vue'

export default {
  name: 'pollingListDetail',
  components: {
    Empty
  },
  data() {
    return {
      listData: [],
      editable: ''
    }
  },
  onLoad() {
    const eventChannel = this.getOpenerEventChannel()
    let that = this
    eventChannel.on('getHiddenDangerList', function (data) {
      console.log(data)
      that.listData = data.obj
      that.editable = data.editable
    })
  },
  methods: {
    handleDelete(index) {
      this.listData.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-wrap {
  display: flex;
  background-color: #fff;

  view {
    position: relative;
    width: 35%;
    height: 38rpx;
    line-height: 38rpx;
    font-size: 36rpx;
    font-weight: 700;
    color: #999;
    text-align: right;
    margin-bottom: 32rpx;
  }

  .active {
    color: #333;

    &::after {
      content: '';
      position: absolute;
      right: 24rpx;
      bottom: -12rpx;
      height: 6rpx;
      width: 30rpx;
      background-color: #454a5e;
    }
  }
}

.grid-body {
  background-color: transparent;
}

.grid-common {
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
}

.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;

    .tsk-name {
      text-indent: 30rpx;
    }

    .tsk-time {
      position: absolute;
      right: 15px;
    }
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;

    text {
      color: #333;
      display: inline-block;

      &.text-grey {
        color: #999;
      }

      &.w-50 {
        width: 50%;
      }
    }
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .bor-top {
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}
</style>
